<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="https://img.alicdn.com/tfs/TB1qEwuzrj1gK0jSZFOXXc7GpXa-32-32.ico"
    mce_href="https://img.alicdn.com/tfs/TB1qEwuzrj1gK0jSZFOXXc7GpXa-32-32.ico" type="image/x-icon" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

  <title>欢迎使用小程序云托管2</title>

  <script src="js/jquery-1.11.1.min.js"></script>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif;
    }

    .title-logo {
      width: 459px;
      height: 87px;
    }

    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    @media screen and (min-width: 1200px) {
      body .container {
        margin-top: 160px;
        margin-bottom: 272px;
      }
    }

    @media screen and (max-width: 1919px) {
      body .container {
        margin-top: 76px;
        margin-bottom: 128px;
      }
    }

    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .title {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 320px;
    }

    .title-text {
      width: 320px;
      height: 48px;
      text-align: center;
      margin-top: 16px;
      font-size: 32px;
      opacity: 0.9;
      font-weight: 500;
      color: #000000;
      letter-spacing: 0;
      line-height: 48px;
    }

    .list-text {
      width: 320px;
      height: 16px;
      text-align: center;
      margin-top: 16px;
      font-size: 18px;
      opacity: 0.9;
      font-weight: 500;
      color: #000000;
      letter-spacing: 0;
      line-height: 10px;
    }

    .foot-text {
      width: 320px;
      height: 16px;
      text-align: center;
      margin-top: 16px;
      font-size: 24px;
      opacity: 0.9;
      font-weight: 500;
      color: #000000;
      letter-spacing: 0;
      line-height: 10px;
    }

    .button_test {
      width: 160px;
      height: 30px;
      text-align: center;
      font-size: 12px;
      color: #FFFFFF;
      background-color: #4C9AF7;
      border: none;
      border-radius: 4px;
      margin-top: 4px;
      cursor: pointer;
    }

    .button_add {
      text-align: center;
      font-size: 10px;
      color: #FFFFFF;
      background-color: #4C9AF7;
      border: none;
      border-radius: 4px;
      margin-top: 4px;
      cursor: pointer;
    }

    table {
      border-collapse: collapse;
      border: 1px solid #dddddd;
      border-radius: 2px;
      margin-top: 4px;
    }

    table td {
      border-top: 1px solid #dddddd;
      border-bottom: 1px solid #dddddd;
      text-align: center;
      padding-top: 4px;
      padding-bottom: 4px;
      padding-left: 10px;
      padding-right: 10px;
    }

    table th {
      border-top: 1px solid #dddddd;
      border-bottom: 1px solid #dddddd;
      background-color: #83c2fd;
      color: #FFFFFF;
      text-align: center;
      padding-top: 4px;
      padding-bottom: 4px;
      padding-left: 10px;
      padding-right: 10px;
    }

    .id_col {
      width: 20px;
      display: none;
    }

    .record_col {
      width: 100px;
    }

    .dbError {
      color: crimson;
    }

    .service_col {
      width: 20px;
    }

    .redisError {
      color: crimson;
    }

    .testService {
      color: chocolate;
    }
  </style>
</head>

<body>
  <script>
    function getDateTime() {
      let now = new Date();
      let year = now.getFullYear(); //得到年份
      let month = now.getMonth(); //得到月份
      let date = now.getDate(); //得到日期
      let day = now.getDay(); //得到周几
      let hour = now.getHours(); //得到小时
      let minu = now.getMinutes(); //得到分钟
      let sec = now.getSeconds(); //得到秒
      month = month + 1;
      if (month < 10) month = "0" + month;
      if (date < 10) date = "0" + date;
      if (hour < 10) hour = "0" + hour;
      if (minu < 10) minu = "0" + minu;
      if (sec < 10) sec = "0" + sec;
      var time = "";
      time =
        year + "-" + month + "-" + date + " " + hour + ":" + minu + ":" + sec;
      return time;
    }

    function testService(flag) {
      $.ajax("/service" + getParams(false), {
        method: "GET",
        contentType: "application/json; charset=utf-8",
      }).done(function (res) {
        if (flag) {
          if ($("#serviceTab").css("display") === "none") {
            $("#serviceTab").css("display", "block");
          } else {
            $("#serviceTab").css("display", "none");
          }
        } else {
          $("#serviceTab").css("display", "block");
        }
        let str = "服务接口：/service&返回结果：";
        str = str + res.data + "&当前时间：" + getDateTime();
        let data = str.split("&");
        let ss = "";
        $("#serviceTab .serviceData").remove();
        for (var i = 0; i < data.length; i++) {
          let strArr = data[i].split("：");
          //拼接表格的行和列
          ss =
            "<tr class='serviceData'><td class='service_col'>" +
            strArr[0] +
            "</td><td class='record_col'>" +
            strArr[1] +
            "</td></tr>";
          //追加到table中
          $("#serviceTab").append(ss);
        }
      });
    }

    function testDatabase(flag) {
      $.ajax("/database/getList" + getParams(false), {
        method: "GET",
      }).done(function (res) {
        if (res.success === true && res.data != null) {
          if (flag) {
            if ($("#tab").css("display") === "none") {
              $("#tab").css("display", "block");
            } else {
              $("#tab").css("display", "none");
            }
          } else {
            $("#tab").css("display", "block");
          }
          var data = res.data;
          var str = "";//定义用于拼接的字符串
          $("#tab .appendData").remove();
          for (var i = 0; i < data.length; i++) {
            //拼接表格的行和列
            str = "<tr class='appendData'><td class='id_col'>" + data[i].id + "</td><td class='record_col'>" + data[i].record + "</td><td>"
              + data[i].gmt_create + "</td><td>" +
              "<a onclick='testDeleteRecord(" + data[i].id + ")' href='javascript:void(0);'>删除</a></td></tr>";
            //追加到table中
            $("#tab").append(str);
          }
        } else {
          $("#dbError").val("数据库异常,请参照项目目录下README.md文件配置数据库")
        }
      });
    }

    function testAddRecord() {
      const record = $("#record").val();
      if (record === null || record === "") {
        testDatabase(false);
        return;
      }
      $.ajax("/database/addRecord" + getParams(false), {
        method: "POST",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({
          "record": $("#record").val()
        })
      }).done(function (res) {
        if (!res.success || res.data === null) {
          $("#dbError").val("数据库异常,请参照项目目录下README.md文件配置数据库")
        }
        testDatabase(false);
      });
    }

    function testDeleteRecord(id) {
      $.ajax({
        type: "get", // 以get方式发起请求
        contentType: "application/json; charset=utf-8",
        url: "/database/deleteRecord?id=" + id + getParams(true),
        success(data) {
          if (data.success === false || data.data === null) {
            $("#dbError").val("数据库异常,请参照项目目录下README.md文件配置数据库")
          }
          testDatabase(false);
        }
      })
    }

    function testShowRedis() {
      if (testRedisSet(true)) {
        if ($("#tabRedis").css("display") === "none") {
          $("#tabRedis").css("display", "block");
        } else {
          $("#tabRedis").css("display", "none");
        }
      }
    }

    function testRedisSet(flag) {
      let result = true;
      let key = 'test';
      let value = 'test';
      if (!flag) {
        key = $("#key").val();
        value = $("#value").val();
      }
      $.ajax({
        type: "get", // 以get方式发起请求
        contentType: "application/json; charset=utf-8",
        url: "/redis/set?key=" + key + "&value=" + value + getParams(true),
        async: false,
        success(res) {
          if (!res.success) {
            $("#redisError").val(
              "Redis异常,请参照项目目录下README.md文件配置Redis"
            );
            $("#value").val("赋值失败");
            result = false;
          }
          if (!flag) {
            $("#value").val("赋值成功");
          }
        },
      });
      return result;
    }

    function testRedisGet() {
      const key = $("#key").val();
      $.ajax({
        type: "get", // 以get方式发起请求
        contentType: "application/json; charset=utf-8",
        url: "/redis/get?key=" + key + getParams(true),
        success(res) {
          if (!res.success) {
            $("#redisError").val(
              "Redis异常,请参照项目目录下README.md文件配置Redis"
            );
          }
          $("#value").val(res.data);
        },
      });
    }

    function getParams(type) {
      let params = window.location.search;
      if (params == '' || params.indexOf('?') != 0) {
        return '';
      }
      if (type) {
        params = params.replace('?', '&');
      }
      return params;
    }
  </script>

  <div class="container">
    <div class="title">
      <img class="title-logo" src="/img/logo.png" />
      <div style="display: inline; margin-bottom: 48px" class="title-text">欢迎使用小程序云托管2</div>
    </div>

    <button type="button" onclick="testService(true)" class="button_test">
      测试服务
    </button>
    <div style="width: 100%;display: flex;justify-content: center;">
      <table id="serviceTab" style="display: none;width: 340px;">
        <tr>
          <td colspan="2">
            <div>
              <button type="button" onclick="testService(false)" class="button_add">
                重新查询
              </button>
            </div>
          </td>
        </tr>
        <tr>
          <th style="width: 160px">服务指标</th>
          <th style="width: 180px">指标信息</th>
        </tr>
      </table>
    </div>
    <br />

    <button type="button" onclick="testDatabase(true)" class="button_test">
      测试数据库访问
    </button>
    <output id="dbError" class="dbError"></output>
    <div style="width: 100%;display: flex;justify-content: center;">
      <table id="tab" style="display: none;width: 340px;">
        <tr>
          <td colspan="4">
            <div>
              <input type="text" placeholder="请输入..." id="record" />
              <button type="button" onclick="testAddRecord()" class="button_add">
                插入一条记录
              </button>
            </div>
          </td>
        </tr>
        <tr>
          <th hidden="hidden" style="width: 20px">id</th>
          <th style="width: 100px">记录信息</th>
          <th style="width: 180px">创建时间</th>
          <th style="width: 40px">操作</th>
        </tr>
      </table>
    </div>
    <br />
    <button type="button" onclick="testShowRedis()" class="button_test">
      测试缓存服务
    </button>
    <output id="redisError" class="redisError"></output>
    <div style="width: 100%;display: flex;justify-content: center;">
      <table id="tabRedis" style="display: none; width: 340px;">
        <tr>
          <th style="width: 100px">key</th>
          <th style="width: 180px">value</th>
          <th style="width: 60px">操作</th>
        </tr>
        <tr>
          <td>
            <input type="text" placeholder="请输入key..." id="key" width="100px" style="width: 80px !important" />
          </td>
          <td>
            <input type="text" placeholder="value..." id="value" width="180px" style="width: 80px !important" />
          </td>
          <td>
            <div style="display: flex;">
              <a onclick='testRedisSet(false)' href='javascript:void(0);' style="width: 40px !important">赋值</a>
              <a onclick='testRedisGet()' href='javascript:void(0);' style="width: 40px !important">取值</a>

            </div>

          </td>
        </tr>
      </table>
    </div>

    <br /><br /><br />
    <span class="foot-text">快速入手</span>
    <hr style="display: block; width: 320px" />
    <a href="https://opendocs.alipay.com/pre-open/04n0zd" target="_blank">
      开发者文档
    </a>
  </div>

</body>

</html>